<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>abBlock演示实例分类列表 - 格晒特效插件</title>
<meta name="keywords" content="abBlock,abBlock下载,格晒特效,格晒插件,jQuery插件" />
<meta name="description" content="格晒js特效插件abBlock.js是一款非常有用的js插件基于jQuery运行，它可以通过设置导航视图来精确的对页面中每个章节的内容进行导航。同时你在滚动页面的时候还可以看到当前阅读的章节处于什么状态。js可以用于检测当前的滚动状态。兼容IE6+ Safari Opera Firefox Chrome 等大部分浏览器。" />
<link href="demo/css/abBlock-demo-common.css" rel="stylesheet" type="text/css" />
</head>
<body>

<!-- ==============================  css 开始 ============================== -->
<style type="text/css">

.demo-body { width:760px; height:320px; margin:0 auto; }
.demo-js-area { margin:0 auto 100px auto; width:880px; font-size:12px; color:#29c; }
.demo-main { text-align:center; }
.mddw-body { width:880px; margin:0 auto; background:#fff;border-radius:50px;box-shadow:0 6px 20px #107cc3; }
.demo-main h4 { text-align:center; font-size:24px; height:90px; line-height:50px; font-weight:700; letter-spacing:.05em; font-style:italic; color:#183b52; }
.abBlock-view-nav { font-style:italic; }
.abBlock-view-nav dl { padding-bottom:20px; color:#183b52; }
.abBlock-view-nav dt { font-size:14px; height:40px; line-height:40px; font-style:italic; font-weight:700;text-indent:2em; }
	.abBlock-view-nav dt.bh1 { color:#09c; text-align:left; }
	.abBlock-view-nav dt.bh2 { color:#79ac13; text-align:left; }
	.abBlock-view-nav dt.bh3 { color:#c4c; text-align:left; }
	
.abBlock-view-nav dd { font-size:14px; color:#183b52; font-weight:500; }
.abBlock-view-nav dd span { font-style:italic; font-size:14px; padding-right:5px; color:#aaa; }
.abBlock-view-nav a { font-style:normal; text-decoration:none; color:#555; padding:0 15px; }
.abBlock-view-nav a:hover { text-decoration:none; color:#4ad585; }
.abBlock-view-nav .line22 { border-bottom:1px solid #292929; padding-bottom:30px; margin-bottom:30px; }

</style>
<!-- ==============================  css 结束 ============================== -->

<!-- 头部开始 -->
<div style="text-align:center;padding:80px 0 20px 0;"><div class="logo z"><h2 style="color:#ebf7fe;font-size:38px;line-height:50px;font-weight:bold;font-style:italic;"><a href="http://ab.geshai.com/other-plus/abBlock" title="abBlock v1.5" target="_blank">abBlock</a></h2><p style="font-size:13px;font-style:italic;color:#ddf0fb;">导航定位滚动插件 v1.5</p></div></div><div class="clear"></div>
<!-- 头部结束 -->

<div class="demo-main">
<div class="h50"></div>
<div class="demo-js-area">
    <h4>一. 瞄点定位，滚动演示</h4>
<div class="mddw-body"><div style="text-align:center; font-size:18px; line-height:30px; padding:30px;">
    <div class="abBlock-view-nav">
        <dl class="line2">
        	<dt class="bh1">默认显示导航</dt>
            <dd><a href="demo/a/abBlock-a-top-01.html" target="_blank"><span>①</span>顶部吸附瞄点定位实例</a><a href="demo/a/abBlock-a-left-01.html" target="_blank"><span>②</span>左侧吸附瞄点定位实例</a><a href="demo/a/abBlock-a-right-01.html" target="_blank"><span>③</span>右侧吸附瞄点定位实例</a><a href="demo/a/abBlock-a-bottom-01.html" target="_blank"><span>④</span>底部吸附瞄点定位实例</a></dd>
        </dl>
        
        <dl>
        	<dt class="bh1">默认不显示导航</dt>
            <dd><a href="demo/b/abBlock-b-top-01.html" target="_blank"><span>①</span>顶部吸附瞄点定位实例</a><a href="demo/b/abBlock-b-left-01.html" target="_blank"><span>②</span>左侧吸附瞄点定位实例</a><a href="demo/b/abBlock-b-right-01.html" target="_blank"><span>③</span>右侧吸附瞄点定位实例</a><a href="demo/b/abBlock-b-bottom-01.html" target="_blank"><span>④</span>底部吸附瞄点定位实例</a></dd>
        </dl>
        <dl>
        	<dt class="bh2">变换导航实例</dt>
        <dd><a href="demo/c/abBlock-c-top-01.html" target="_blank"><span>①</span>滚动后改变导航样式，瞄点定位，滚动实例。</a><a href="demo/c/abBlock-c-top-02.html" target="_blank"><span>②</span>滚动后改变导航内容，瞄点定位，滚动实例。</a></dd>
        </dl>
    </div>
        
</div></div>

<div class="h100"></div><div class="h50"></div>
    <h4>二. 不瞄点定位，滚动演示</h4>
<div class="mddw-body"><div style="text-align:center; font-size:18px; line-height:30px; padding:30px;">
    <div class="abBlock-view-nav">
        <dl class="line2">
        	<dt class="bh1">默认显示导航</dt>
            <dd><a href="demo/d/abBlock-d-top-01.html" target="_blank"><span>①</span>顶部吸附导航滚动实例</a><a href="demo/d/abBlock-d-left-01.html" target="_blank"><span>②</span>左侧吸附导航滚动实例</a><a href="demo/d/abBlock-d-right-01.html" target="_blank"><span>③</span>右侧吸附导航滚动实例</a><a href="demo/d/abBlock-d-bottom-01.html" target="_blank"><span>④</span>底部吸附导航滚动实例</a></dd>
        </dl>
        
        <dl>
        	<dt class="bh1">默认不显示导航</dt>
            <dd><a href="demo/e/abBlock-e-top-01.html" target="_blank"><span>①</span>顶部吸附导航滚动实例</a><a href="demo/e/abBlock-e-left-01.html" target="_blank"><span>②</span>左侧吸附导航滚动实例</a><a href="demo/e/abBlock-e-right-01.html" target="_blank"><span>③</span>右侧吸附导航滚动实例</a><a href="demo/e/abBlock-e-bottom-01.html" target="_blank"><span>④</span>底部吸附导航滚动实例</a></dd>
        </dl>
        <dl>
        	<dt class="bh3">变换导航实例</dt>
            <dd><a href="demo/f/abBlock-f-top-01.html" target="_blank"><span>①</span>滚动后改变导航样式，不瞄点定位，滚动实例。</a><a href="demo/f/abBlock-f-top-02.html" target="_blank"><span>②</span>滚动后改变导航内容，不瞄点定位，滚动实例。</a></dd>
        </dl>
    </div>
        
</div> </div></div>




<div class="clear"></div>




























<div class="clear"></div><div class="h100"></div><div class="clear"></div>
<!--<div class="demo-tit"><h3><a href="index.html" target="_blank">返回首页</a><span class="a2">|</span><a href="index.html" target="_blank">插件下载</a></h3></div>-->
<div class="demo-text">
    <h6>abBlock基于jquery实现的导航瞄点定位插件</h6>
    <p>设置导航默认是否显示，是否瞄点上下左右的位置吸附，精确的对导航对应内容进行定位，可设置导航默认<br>样式或内容，滚动后变换样式或内容。同时在滚动页面时可看到当前阅读的导航对应状态。<br>兼容IE6+ Safari Opera Firefox Chrome</span>等大部分浏览器。</p>
</div>
<div id="tbox2"><a id="gotop2" title="返回顶部" href="javascript:scroll(0,0);">Top</a></div>
</div>
</body>
</html>